<!DOCTYPE html> 
<html> 
<head> 
	<meta charset="utf-8"> 
	<title>DataURL</title> 
	<style>
		img{ position:absolute; }
		.move { cursor: move; }
		body{ width:100%; height:800px; }
	</style>
	<script> 
	// generates a <img> object containing the imagedata
	var makeImageObject = function(strSource) {
		var oImgElement = document.createElement("img");
		oImgElement.src = strSource;
		return oImgElement;
	}
	var saveFile = function(strData) {
		document.location.href = strData;
	}

function saveCanvas(canvas, destFile) {
	netscape.security.PrivilegeManager.enablePrivilege('UniversalXPConnect');
  // convert string filepath to an nsIFile
  var file = Components.classes["@mozilla.org/file/local;1"]
                       .createInstance(Components.interfaces.nsILocalFile);
  file.initWithPath(destFile);

  // create a data url from the canvas and then create URIs of the source and targets  
  var io = Components.classes["@mozilla.org/network/io-service;1"]
                     .getService(Components.interfaces.nsIIOService);
  var source = io.newURI(canvas.toDataURL("image/png", ""), "UTF8", null);
  var target = io.newFileURI(file)
    
  // prepare to save the canvas data
  var persist = Components.classes["@mozilla.org/embedding/browser/nsWebBrowserPersist;1"]
                          .createInstance(Components.interfaces.nsIWebBrowserPersist);
  
  persist.persistFlags = Components.interfaces.nsIWebBrowserPersist.PERSIST_FLAGS_REPLACE_EXISTING_FILES;
  persist.persistFlags |= Components.interfaces.nsIWebBrowserPersist.PERSIST_FLAGS_AUTODETECT_APPLY_CONVERSION;
  
  // displays a download dialog (remove these 3 lines for silent download)
  var xfer = Components.classes["@mozilla.org/transfer;1"]
                       .createInstance(Components.interfaces.nsITransfer);
  xfer.init(source, target, "", null, null, null, persist);
  persist.progressListener = xfer;
  
  // save the canvas data to the file
  persist.saveURI(source, null, null, null, null, file);
}

  // *** copied from an example(note) at xulplanet
  
  // sFilePath and sFileContent are just strings
  function writeFile( sFilePath, sFileContent )
  {
   try
   {
    var file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
    file.QueryInterface(Components.interfaces.nsIFile);
    file.initWithPath( sFilePath );
    if( file.exists() == true ) file.remove( false );
    var strm =  Components.classes["@mozilla.org/network/file-output-stream;1"].createInstance(Components.interfaces.nsIFileOutputStream);
    strm.QueryInterface(Components.interfaces.nsIOutputStream);
    strm.QueryInterface(Components.interfaces.nsISeekableStream);
    //strm.init( file, 0x04 | 0x08, 420, 0 );
    strm.init( file, 0x04 | 0x08, 0666, 0 );
    strm.write( sFileContent, sFileContent.length );
    strm.flush();
    strm.close();
   }
   catch(ex)
   {
    window.alert(ex.message);
  }
 } 

	
		function loaded (){
			
			var canvas = document.getElementById("canvas");
			
			var ctx = canvas.getContext('2d');
			ctx.fillRect( 50,50, 50, 50 );
			
			var data = canvas.toDataURL( "image/png" );

			var img = makeImageObject( data );
			
			//alert( data );
			
			document.getElementsByTagName("body")[0].appendChild( img );
			
			//$("body").append( img );
			
			//saveCanvas( $("#canvas")[0], "test.png" );
			
			//var strDownloadMime = "image/octet-stream";
			//var strDownloadMime = "image/png";
			//saveFile(data.replace("image/png", strDownloadMime));
			
			//var son = window.open( data, "popimage", 'width='+ canvas.width +',height='+ canvas.height );
			
			//img.src = "1.png";
			
			
			//alert( son );
			//saveFile( data  );
			
			saveCanvas( canvas, "1.png" );
			
			//writeFile( "1.txt", "1111" );		
		};
		
	</script> 
</head> 
<body  onload="loaded()" id="canvasdemo"> 
	<canvas id="canvas" width="400" height="400" ></canvas> 
</body> 
<script></script>
</html>